<!-- 选择物料 -->
<template>
	<view>
		<view>
			<navitop>
				<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
				<span slot="center-slot">{{titles}}</span>
				<!-- <i class="iconfont " slot="right-slot" @click="add"></i> -->
			</navitop>
		</view>

		<view :style="'padding-top:' + nv_height">
			<div class="details_search">
				<div class="details_search_list">
					<div class="details_search_txt">
						<input placeholder="请输入物料编号/名称" v-model="search_data" />
					</div>
					<div class="details_search_bottom" @click="search_class">
						搜索
					</div>
				</div>
			</div>
		</view>

		<!-- 分类树形显示 -->
		<view class="details_tree">
			<div class="details_tree_cla">物料分类</div>
			<scroll-view scroll-y="true" class="details_tree_slot" :style="'height:' + height_window_tiao">
				<m-tree :data="tree" :divider="divider" :edit="edit" :show="true" @node-click="nodeClick"> </m-tree>
			</scroll-view>
		</view>

		<!-- 右弹窗 -->
		<popus ref="right_lsit">
			<div :style="'width:' + right_width + ';height:' + height_window " @click="rigth_close">
				<div :style="'padding-top:' + nv_height" class="top_losta"></div>
				<div class="details_tree_right" @click.stop="rigth_no" :style="'height:' + height_window">
					<div class="detail_tree_top">
						物料档案
					</div>
					<scroll-view  scroll-y="true" class="details_tree_slot" :style="'height:' + height_window_tiao">
						<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
							:down="downOption" :up="upOption">
							<div class="details_tree_lsit" v-for="(item,index) in right_dataSorce"
								@click.stop="rigth_clos(item)">
								<div class="details_tree_dispaly">
									<div class="details_tree_title">物料编码：</div>
									<div class="details_tree_class">{{item.inventoryCode}}</div>
								</div>
								<div class="details_tree_dispaly">
									<div class="details_tree_title">物料名称：</div>
									<div class="details_tree_class">{{item.inventoryName}}</div>
								</div>
								<div class="details_tree_dispaly">
									<div class="details_tree_title">规格型号：</div>
									<div class="details_tree_class">{{item.inventorySpecification}}</div>
								</div>
								<div class="details_tree_dispaly">
									<div class="details_tree_title">计量单位：</div>
									<div class="details_tree_class">{{item.unitName}}</div>
								</div>
							</div>
							<div class="null_title" v-if="right_dataSorce == ''">
								<div>
									<i class="iconfont icon-empty iconcize"></i>
								</div>
								<div class="null_title_tow">
									没有更多数据
								</div>
							</div>
						</mescroll-body>
					</scroll-view>
				</div>
			</div>
		</popus>
	</view>
</template>

<script>
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import mtrre from "@/uni_modules/m-tree/components/m-tree/m-tree.vue"
	import navitop from '@/components/common/navi-top'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getInList,
		inpageList
	} from "@/common/api/job/bill.js"
	export default {
		components: {
			navitop,
			mtrre,
			popus
		},
		mixins: [MescrollMixin],
		data() {
			return {
				divider: false,
				edit: true,
				titles: '选择物料',
				nv_height: '',
				height_window_tiao: '',
				right_width: '',
				height_window: '',
				right_dataSorce: [],
				search_data: '',
				the_history: {},
				tree: [],
				pages: 1,
				curl_obj: '',
				// 下拉刷新的配置
				downOption: {
					auto: false,
					beforeEndDelay: 300,
				},
				// 上拉加载的配置
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						use: true,
						tip: '暂无相关数据'
					},
					textNoMore: '没有更多数据了...',
					toTop: {
						offset: 1000 // 滚动多少才显示to-top 
					}
				},
			}
		},

		onLoad(option) {
			this.curl_obj = option;
		},

		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 55 + 'px';

			this.right_width = uni.getSystemInfoSync().screenWidth + 'px';

			this.height_window = uni.getSystemInfoSync().screenHeight + 'px';

			this.height_window_tiao = uni.getSystemInfoSync().screenHeight + -200 + 'px';

			this.page_list();

		},
		methods: {

			// 返回上一页
			outlot() {
				this.$emit('bill_end')
			},

			// 获取分类
			page_list() {
				let rundata = [];
				getInList().then((rows) => {
					if (rows.code == 200) {
						this.nv_list = rows.data;
						this.classPageListToTree(this.nv_list);
					}
				})
			},

			/**
			 * 树形结构处理
			 */
			classPageListToTree(list) {
				const treeMap = new Map();
				list.forEach(item => {
					if (!item.classEnd) {
						item.children = [];
					}
					treeMap.set(item.id, item)
				});

				list.forEach(item => {
					item.key = item.id;
					item.title = item.className;
					let parentId = item.parentId;
					let parentItem = treeMap.get(parentId);
					if (parentItem) {
						let {
							children
						} = parentItem;
						if (children) {
							children.push(item);
						} else {
							parentItem.children = [item];
						}
					}
				});
				this.tree = list.filter(rst => rst.parentId == 0)
			},

			// 获取物料
			data_list(data) {
				uni.showLoading({
					title: '加载中...'
				})
				inpageList(data).then((item) => {
					if (item.code == 200) {
						uni.hideLoading();
						if (this.pages == 1) {
							this.right_dataSorce = item.data.records;
						} else {
							item.data.records.filter(item => {
								_this.right_dataSorce.push(item)
							})
						}
						if (this.right_dataSorce.length > 0) {
							this.$refs.right_lsit.open('right');
						}
					}
				})
			},

			// 搜索
			search_class() {
				this.the_history = {};
				let data_obj = {
					current: this.pages,
					size: 20,
					searchKey: this.search_data
				};
				this.the_history = data_obj;
				if (this.search_data) {
					this.data_list(this.the_history);
				}
			},

			//节点点击事件
			nodeClick(e) {
				this.the_history = {};
				let data_obj = {
					current: this.pages,
					size: 20,
					inventoryClassCode: e.classCode
				};
				this.the_history = data_obj;
				if (e.classEnd == true) {
					this.data_list(this.the_history);
				}

			},

			// 点击关闭弹窗
			rigth_close() {
				this.$refs.right_lsit.close();
			},

			// 选择物料  
			rigth_clos(val) {
				this.$emit('bill_end', val)
			},



			// 防止事件冒泡事件
			rigth_no() {},

			/*下拉刷新的回调*/
			downCallback(val) {
				console.log('下拉--------')
				this.data_list(this.the_history);
				// 下拉刷新和上拉加载调同样的接口,直接mescroll.resetUpScroll()即可
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 500)
			},

			// 上拉加载
			upCallback(page) {
				this.pages++;
				this.data_list(this.the_history);
				setTimeout(() => {
					this.mescroll.endErr();
				}, 500)
			},

		}
	}
</script>

<style scoped lang="scss">
	.top_losta {
		width: 75%;
		// background-color: #fff;
		float: right;
	}

	.detail_tree_top {
		padding: 5px 0 5px 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #cacaca;
		font-size: 18px;
		color: #0098EF;
	}

	.details_search_txt {
		border: 1px solid #cacaca;
		border-bottom-left-radius: 4px;
		border-top-left-radius: 4px;
		border-right: 0;
		width: 70%;

		input {
			margin: 0;
			height: 70rpx;
			width: 90%;
			border: 0;
			padding-top: 1px;
		}
	}

	.details_search_bottom {
		width: 30%;
		text-align: center;
		color: #fff;
		background-color: #0098EF;
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.details_search_list {
		padding: 10px;
		width: 90%;
		margin: auto;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		margin-bottom: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.details_tree_cla {
		padding: 5px;
	}

	.details_tree {
		width: 95%;
		margin: auto;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.details_tree_slot {
		width: 90%;
		margin: auto;
	}

	.details_tree_right {
		width: 75%;
		float: right;
		background-color: #F0F0F0;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.details_tree_lsit {
		width: 90%;
		margin: auto;
		margin-top: 5px;
		padding: 5px 5px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.details_tree_dispaly {
		display: flex;
		overflow: hidden;
	}

	.details_tree_title {
		width: 40%;
	}

	.details_tree_class {
		width: 60%;
	}
</style>
